<script setup>
import {ref,watch} from 'vue'

const count = ref(0)
const nickname = ref('张三')

const changeCount=()=>{
    count.value++
}

const changeNickname = () =>{
    nickname.value = '李四'
}

// 1.监视单个数据的变化
// watch(count,(newValue,oldValue)=>{
//     console.log(newValue,oldValue);  
// })

// 2.监视多个数据的变化
// watch([count,nickname],(newArr,oldArr) => {
//     console.log(newArr,oldArr);
    
// })

//3.立刻执行
// watch(count,(newValue,oldValue) => {
//     console.log(newValue,oldValue);
    
// },{
//     immediate:true
// })

// 4.深度监视
const userInfo = ref({
    name:'zs',
    age:18
})

const setUserInfo = () => {
    userInfo.value.age++
}

// watch(userInfo,(newValue) => {
//     console.log(newValue);
    
// },{
//     deep:true
// })

// 5.只监视某个属性的变化
watch(()=>userInfo.value.age,(newValue,oldValue)=>{
    console.log(newValue,oldValue);
    
})
</script>

<template>
    <div>{{count}}</div>
    <button @click="changeCount">改数字</button>
    <div>{{nickname}}</div>
    <button @click="changeNickname">改昵称</button>
    <div>----------------------------------------</div>
    <br>
    <div>{{userInfo}}</div>
    <button @click="setUserInfo">修改userInfo</button>
</template>